
<script type="text/javascript">
/* 
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/


/***********************************************************************************************************/
var myLayout;// a var is required because this page utilizes: myLayout.allowOverflow() method

myLayout = $('body').layout(layout_Outer_body).allowOverflow('north');
$('div .container_page').layout(layout_Outer_container);//layout_Outer_containe
myLayoutWidget = $('div .widget').layout(layout_Outer_widget);//layout_Outer_containe

/***** initialisation des éléments *******/

$(window).load(function(){
    //on initialise les bouttons previous et next
    $("#previous-desktop").attr('class','disabled');
    $("#previous-desktop a").html('&larr; Prev.');
    $("#next-desktop").attr('class', 'next');
    //alert(listOfDesktop[0].hash);
    $("#next-desktop a").html('Next &rarr;');
    currentDesktop = listOfDesktop[0].hash;
    $("#label-desktop-name label").html();
    //console.log($().();
    
    
    //fin de chargement de l application 
    $("#check-appli-load").append("<img src='/GWIT_Plateform_Trading/web/loading/image/valide2.png'/>");
    
    //quit la page de chargement, le delai laissera de la marge au serveur
    setTimeout(
        function() 
        {
            $("#shadowing-loader").hide("slow");
            $("#box-loader").hide("slow");
        }, 800);    
});

$('.widget').draggable({ 
        handle: ".modal-header",
        containment: "parent",
        scroll: false
});

$('.widget').resizable({
        maxHeight: 700,
        maxWidth: 800,
        minHeight: 30,
        minWidth: 400
});

$('.widget').resize(function() {
            if (myLayoutWidget) myLayoutWidget.resizeAll();
});


/* Minimize: Hide content of Widget */
$('.widget .modal-header .btn-group .toggle_button').on("click", function() {
        /*var this_obj = $(this);
        var icone = this_obj.children();
        var widget_body = this_obj.parent().parent().parent().find('.widget-body');
        if(icone.hasClass('icon-minus')){
                icone.removeClass('icon-minus').addClass('icon-plus');
                //this_obj.parent().parent().parent().children('.ui-layout-center').hide();
                this_obj.parent().parent().parent().height(25);
        }else{
                icone.removeClass('icon-plus').addClass('icon-minus');
                this_obj.parent().parent().parent().height(200);
        }

        this_obj.find('div .ui-resizable-handle').hide();
        */

});
/* HIDE/SHOW Widget */
$('.widget .modal-header .btn-group .hide_button').on("click", function() {
        var this_obj = $(this);
});

$(".widget").on("mousedown", function() {
        $('.widget').removeClass('on_top');
        $(this).addClass('on_top');

});

/*************** MAIN MENU ****************/
/* Monitor */
$(".dropdown_button").on({
    click:  function(){
            $(this).toggleClass("open");
    }
});


/* Widget */
$(".widget_button").on({
    click: function(){
            /*Close ul*/
            $(this).parent().toggleClass("open");


    }
});
$("#widget_menu li.under_menu").on({
    click: function(){
            /*Close ul*/
            $(this).parent().parent().toggleClass("open");
    }
});


/* Activate/Hide widget */
$("#widget_menu li.wiget_list a").on({
    click: function(){

            $("#widget_menu li.wiget_list a div.btn").on({
                click: function(event){
                        event.stopPropagation();
                }
            });

        /*    HIDE/SHOW widget    */
        var WidgetContainer = $('#monitor_1 .widget_zone > div');

        //Show Widget and put it on the front (z-index maximum)
        if($(this).children(".icon-ok").hasClass('icon-white')){ 
                $(this).children(".icon-ok").removeClass('icon-white');
                WidgetContainer.filter(this.hash).show();

        }else{//Hide Widget
                $(this).children(".icon-ok").addClass('icon-white');
                WidgetContainer.filter(this.hash).hide();
        }

    }
});

$("#widget_menu li.wiget_list div.btn").on({
        click: function(event){
                alert('div');
        }
});

//Previous button :
//TODO : La récupération du nom se fera par la base de donnée
$("#previous-desktop").on({click: function(){
    if($("#previous-desktop").attr('class') != "disabled"){
        
        //Initialisation de l'index du moniteur courrant apres deplacement
        var index = ((listOfDesktop.indexOf(currentDesktop) - 1) < 0) ? 0 : (listOfDesktop.indexOf(currentDesktop) - 1);
        console.log(index);
        currentDesktop = listOfDesktop[index];
        //alert(listOfDesktop[0]);
        //On désactive le button si on arrive à la fin
        if(listOfDesktop.indexOf(currentDesktop) <= 0){
            $("#previous-desktop").attr('class','disabled');
        }

        //On active le button precédent
        if($("#next-desktop").attr('class') == "disabled"){
            $("#next-desktop").attr('class','next');
        }
        
        $("#label-desktop-name label").html(currentDesktop.hash);
        
        //mise à jour du menu deroulant et du bureau
        tabContainers = $('#center > div');
        tabContainers.hide().filter(currentDesktop.hash).show();
        
        $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
        $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
        $(currentDesktop).children(".icon-ok").removeClass('icon-white');
        $(currentDesktop).children(".icon-ok").addClass('icon-black');
    }
}});

//Next button : 
$("#next-desktop").on({click: function(){
    if($("#next-desktop").attr('class') != "disabled"){
        //Initialisation de l'index du moniteur courrant apres deplacement
        var index = ((listOfDesktop.indexOf(currentDesktop) + 1) > (listOfDesktop.length - 1)) ? (listOfDesktop.length - 1) : (listOfDesktop.indexOf(currentDesktop) + 1);
        currentDesktop = listOfDesktop[index];
        //On désactive le button si on arrive à la fin
        if(listOfDesktop.indexOf(currentDesktop) >= listOfDesktop.length - 1){
            $("#next-desktop").attr('class','disabled');
        }

        //On active le button precédent
        if($("#previous-desktop").attr('class') == "disabled"){
            $("#previous-desktop").attr('class','previous');
        }
        
        $("#label-desktop-name label").html($(currentDesktop.hash+" a").text());
        
        //mise à jour du menu deroulant et du bureau
        tabContainers = $('#center > div');
        tabContainers.hide().filter(currentDesktop.hash).show();
        $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
        $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
        $(currentDesktop).children(".icon-ok").removeClass('icon-white');
        $(currentDesktop).children(".icon-ok").addClass('icon-black');
        }
}});


//
$("#profile").on({click: function(){
        if($("#profile-list").css('display')=='none')
            $("#profile-list").css('display','block');
        else
            $("#profile-list").css('display','none');
}});

/************** MONITOR RADIOBOX **************/

var tabContainers;
var currentDesktop;
//Liste des élements li
var listOfDesktop = $.makeArray(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));
//console.log(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));

$("#monitor_menu li.monitor_page a").on({
    click: function(){
        tabContainers = $('#center > div');
        tabContainers.hide().filter(this.hash).show();
        //console.log(listOfDesktop);
        currentDesktop = this.hash;
        $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
        $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
        $(this).children(".icon-ok").removeClass('icon-white');
        $(this).children(".icon-ok").addClass('icon-black');
    }
}).filter(':first').click().click();

//Create new monitor
$("#monitor_menu li.new-monitor a").on({click: function(){
        $("#shadowing").show();
        $("#box").show();
        $("#lightbox-newmonitor").unbind("click");
}});

//Bouton de la lightbox create monitor
$("#btn-create-desktop a").on({click: function(){
        
        var json = '{"username": "toto", "coin": "twist"}';
        
        $.ajax({
            url: "http://localhost/GWIT_Plateform_Trading/web/app_dev.php/test/request",
            type:"POST",
            contentType: 'application/json',
            data: json,
            success:function () {
                
            }
        });

        /**
        //Mise à jour du menu supérieur
        $("#desktop-grpe").append("<li class='li_grey monitor_page'>"
            + "<a href='#monitor_2' class='button-desktop-activate'>"
            + "<i class='icon-ok icon-white'></i>"
            + "<span>"+$("#new-monitor-name").val()+"</span>"
            + "<div style='float:right;display: inline;margin-top:-3px;'>"
            + "<div class='btn' style='margin:1px;padding:1px;'><i class='icon-pencil icon-black'></i></div>"
            + "<div class='btn'style='margin:1px;padding:1px;'><i class='icon-trash icon-black'></i></div>"
            + "</div></a></li>");
        */
       //TODO: Mise à jour de la liste de moniteur
       //listOfDesktop = $.makeArray(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));
       
       //TODO: Mise à jour de la base de donnée
       
       
       //TODO: Réinitiliser la div par default
       $("#new-monitor-name").val("New Desktop");
       $("#shadowing").hide();
       $("#box").hide();
       
}});

/**
<li class="li_grey monitor_page">
                                        <a href="#monitor_2" class="button-desktop-activate">
                                            <i class="icon-ok icon-white"></i>
                                            <span> Monitor 2</span>
                                            <div style="float:right;display: inline;margin-top:-3px;">
                                                <div class="btn" style="margin:1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
                                                <div class="btn" style="margin:1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
                                            </div>
                                        </a>
                                    </li>*/
</script>